<script setup>

import {onMounted, ref} from "vue";
import {diffTagType, diffTagText, PoolVO} from "@/model/pool.js";
import {useRouter} from "vue-router";
import {r_p_delete, r_p_list} from "@/request/api/pool.js";
import {useLoginStorage} from "@/stores/loginStorage.js";
import {ElMessage, ElMessageBox} from "element-plus";

const loginStore = useLoginStorage();
const router = useRouter();

const poolVOsData = ref([{...PoolVO}]);

const list = () => {
  r_p_list().then(data => {
    poolVOsData.value = data;
  });
}

const solving = (poolId) => {
  window.open(router.resolve(`/solving/${poolId}`).href, '_blank');
}

const save = () => {
  router.push('/pool/save');
}

const update = (poolId) => {
  router.push(`/pool/update/${poolId}`);
  console.log("update");
}

const del = (index) => {
  ElMessageBox.confirm('确 定 要 删 除 该 测 题 ？', '删 除 谨 慎 操 作', {
    confirmButtonText: '确 定',
    cancelButtonText: '取 消',
    type: 'warning',
    draggable: true,
  }).then(() => r_p_delete(poolVOsData.value[index].poolId).then(ok => {
    if (!ok) return;
    poolVOsData.value.splice(index, 1);
    ElMessage.success('删 除 成 功 ');
  })).catch(() => false);
}

onMounted(() => {
  if (poolVOsData.value[0].poolId === null)
    poolVOsData.value = null;

  if (loginStore.getIsLogin)
    list();
});

</script>

<template>
  <div class="index-all">
    <div>
      <span class="title">系 统 题 库</span>
      <el-button type="primary" size="small" @click="save">录 入 新 题</el-button>
    </div>

    <el-card v-for="(pool, index) in poolVOsData" :key="index" shadow="never">
      <div class="card-content">
        <span class="pool-id">{{ pool.poolId || '999999' }}</span>
        <span class="pool-title">
          <a class="pool-solve" href="javascript:" @click="solving(pool.poolId)">{{ pool.title || '--' }}</a>
      </span>
        <span class="pool-item">
        <el-tag :type="diffTagType(pool.difficulty)" effect="plain">{{ diffTagText(pool.difficulty) }}</el-tag>
      </span>
        <span class="pool-item">
        <el-button link type="warning" @click="update(pool.poolId)">修 改</el-button>
        <el-button link type="danger" @click="del(index)">删 除</el-button>
      </span>
      </div>
    </el-card>

    <!--    <p>
          <el-table :data="poolVOsData" empty-text="暂 无 数 据">
            <el-table-column prop="poolId" label="题 号" width="150px"/>
            <el-table-column prop="title" label="标 题" width="400px"/>
            <el-table-column prop="difficulty" label="难 度" width="150px">
              <template #default="scope">
                <el-tag :type="diffTagType(scope.row.difficulty)" effect="plain">
                  {{ diffTagText(scope.row.difficulty) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="解 题">
              <template #default="scope">
                <el-button link type="primary" @click="solving(scope.row.poolId)">解 题</el-button>
              </template>
            </el-table-column>
            <el-table-column label="操 作" fixed="right">
              <template #default="scope">
                <el-button link type="warning" @click="update(scope.row.poolId)">修 改</el-button>
                <el-button link type="danger" @click="del(scope.$index)">删 除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </p>-->

  </div>
</template>

<style scoped>
.title {
  font-size: 20px;
  margin-right: 50px;
}

.el-table {
  width: 90%;
  color: black;
}

.el-card {
  min-width: 750px;
  width: 750px;
  max-width: 750px;
  margin-top: 10px;
}

.el-card:hover {
  background: rgba(242, 243, 245, 0.7);
  border: gray 1px solid;
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: left;
}

.pool-id {
  display: inline-block;
  width: 60px;
}

.pool-item, .pool-title {
  display: inline-block;
  margin-left: 30px;
  font-weight: bolder;
}

.pool-title {
  min-width: 400px;
  width: 400px;
}

.pool-solve {
  display: inline-block;
  width: 99%;
  text-decoration: none;
  font-weight: normal;
  font-size: 15px;
  color: gray;
}

.pool-solve:hover {
  color: black;
}


</style>